<template>
  <div class="team-games">
    <div class="filter-wrap">
      <div class="doing" @click.stop='filterGame(3)'>
        <i class="iconfont" :class="reqParams.gameStep === 3?'icon-checkbox2':'icon-checkbox'"></i>
        <span>进行中</span>
      </div>
      <div class="nostart" @click.stop='filterGame(0)'>
        <i class="iconfont" :class="reqParams.gameStep === 0?'icon-checkbox2':'icon-checkbox'"></i>
        <span>未开始</span>
      </div>
      <div class="end" @click.stop='filterGame(4)'>
        <i class="iconfont" :class="reqParams.gameStep === 4?'icon-checkbox2':'icon-checkbox'"></i>
        <span>已结束</span>
      </div>
      <div class="filter-tab">
        <div :class="{checked: reqParams.isPwd == 0}" @click.stop='checkGame(0)'>公开赛</div>
        <div :class="{checked: reqParams.isPwd == 1}" @click.stop='checkGame(1)'>邀请赛</div>
      </div>
    </div>
    <div class="sort-wrap">
      <div class="time" @click='sortGame(1)'>
        <span>按比赛时间</span>
        <div :class='{"order-up": upDate,"order-blue":(reqParams.order == 1 || reqParams.order == -1)}'><i
          class="iconfont icon-xiangxia"></i></div>
      </div>
      <div class="players" @click='sortGame(2)'>
        <span>按参赛人数</span>
        <span :class='{"order-up": upPlayers,"order-blue":(reqParams.order == 2 || reqParams.order == -2)}'><i
          class="iconfont icon-xiangxia"></i></span>
      </div>
      <div class="award" @click='sortGame(3)'>
        <span>按奖励数量</span>
        <span :class='{"order-up": upAward,"order-blue":(reqParams.order == 3 || reqParams.order == -3)}'><i
          class="iconfont icon-xiangxia"></i></span>
      </div>
    </div>
    <load-more :top-method='refresh' :bottom-method='loadMoreData' ref='loadMore'>
      <div class="list">
        <div v-for='game in games' :key='game.GAME_ID' v-if='game.GAME_STEP != "5"' @click='gotoDetail(game)'>
          <game-item-v2 :game='game'></game-item-v2>
        </div>
      </div>
      <div v-if='requestError' @click='resetGames()' class="requestError">{{errorText}}</div>
    </load-more>
  </div>
</template>

<style lang='less' rel="stylesheet/less" scoped>
  .team-games {
    padding-bottom: 44px;
    background: #fff;
    .filter-wrap {
      display: flex;
      text-align: center;
      color: #999;
      font-size: 12px;
      border-top: 1px solid #E7E7E7;
      height: 38px;
      margin-top: 8px;
      padding-left: 7.666%;
      align-items: center;
      .doing, .nostart, .end {
        margin-right: 3%;
        i {
          font-size: 17px;
          color: #2691f9;
          position: relative;
          top: 2px;
        }
      }
      .filter-tab {
        display: flex;
        width: 30%;
        height: 23px;
        color: #fff;
        border-radius: 11.5px;
        margin-left: 3%;
        div {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          background: #565656;
        }
        div:nth-child(1) {
          border-top-left-radius: 11.5px;
          border-bottom-left-radius: 11.5px;
        }
        div:nth-child(2) {
          border-top-right-radius: 11.5px;
          border-bottom-right-radius: 11.5px;
        }
        .checked {
          background: #2FAFEC !important;
        }
      }
    }
    .sort-wrap {
      display: flex;
      text-align: center;
      color: #999;
      font-size: 12px;
      border-top: 1px solid #E7E7E7;
      height: 39px;
      box-shadow: 0 19px 19px 0 rgba(231, 231, 231, 0.7);
      align-items: center;
      justify-content: space-between;
      padding: 0 7.666%;
      .time, .award, .players {
        display: flex;
        align-items: center;
        justify-content: center;
        /*flex:1;*/
      }
      .order-up {
        transform: rotate(180deg);
      }
      .order-blue {
        color: #2FAEFC;
      }
    }
    .pageNum {
      position: fixed;
      bottom: 150px;
      color: red;
      font-size: 30px;
    }
    .requestError {
      text-align: center;
      padding: 20px 0 0;
    }
  }

</style>

<script>
  import GameItemV2 from 'components/game/gamelist/GameItemV2'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import LoadMore from 'components/LoadMore'
  // import {openGame} from 'components/game/openGame'

  export default {
    components: {
      'game-item-v2': GameItemV2,
      'load-more': LoadMore
    },
    data(){
      return {
        games: [],
        reqParams: {
          gameStatus: '1',//审核通过的
          pageSize: 10,
          pageNum: 1,
          gameStep: 3, // 3 进行中 0未开始 4已结束
          isPwd: 0,
          order: -1
        },
        upDate: false, //时间排序箭头是否向上
        upPlayers: false, //人数排序箭头是否向上
        upAward: false, // 奖励排序箭头是否向上
        requestError: false,
        errorText: '出错啦~点击重试！',
        scrollTop: 0
      }
    },
    created(){
//    this.getGamesT();
    },
    updated () {
      let filters = {
        order: this.reqParams.order,
        gameStep:this.reqParams.gameStep,
        isPwd:this.reqParams.isPwd,
        upDate: this.upDate,
        upPlayers: this.upPlayers,
        upAward: this.upAward
      }
      this.$store.dispatch('setTeamFilters',filters)
    },
    methods: {
      refresh (){
        this.getGamesT(true);
      },
      loadMoreData (){
        this.getGamesT(false);
      },
      /**
       * 跳转到比赛详情
       * @param  {Object} game 比赛
       */
      gotoDetail(game){
        this.$router.push({ path: '/team-game/game-detail',
          query: { gameId: game.GAME_ID, gameName: game.GAME_NAME }});
        var kv = {"usercode":LocalDAO.getUserCode(),"k2":game.GAME_ID};//埋点
        TDAPP.onEvent("17008","",kv);
        TDAPP.send();
      },
      resetGames(){
        this.requestError = false;
        this.reqParams.pageNum = 1;
        this.games = []
//        this.scrollTop = document.body.scrollTop
        this.$refs.loadMore.reset();
      },
      /**
       * 给比赛进行筛选
       * @param  {number} type 筛选的种类
       */
      filterGame (step) {
        this.reqParams.gameStep = step
        this.resetGames()
      },
      /**
       * 切换公开赛及邀请赛
       * @param  {number} type 切换的种类
       */
      checkGame (type) {
        this.reqParams.isPwd = type
        this.resetGames()
      },
      /**
       * 给比赛排序
       * @param  {number} type 排序的种类
       */
      sortGame(type){
        switch (type) {
          case 1://game start date
            if (Math.abs(this.reqParams.order) === 1) {
              this.reqParams.order = -this.reqParams.order
              this.upDate = !this.upDate
            } else {
              if (this.upDate) {
                this.reqParams.order = 1
              } else {
                this.reqParams.order = -1
              }
            }
            break;
          case 2://players
            if (Math.abs(this.reqParams.order) === 2) {
              this.reqParams.order = -this.reqParams.order
              this.upPlayers = !this.upPlayers
            } else {
              if (this.upPlayers) {
                this.reqParams.order = 2
              } else {
                this.reqParams.order = -2
              }
            }
            break;
          case 3://award
            if (Math.abs(this.reqParams.order) === 3) {
              this.reqParams.order = -this.reqParams.order
              this.upAward = !this.upAward
            } else {
              if (this.upAward) {
                this.reqParams.order = 3
              } else {
                this.reqParams.order = -3
              }
            }
            break;
        }
        this.resetGames()
      },
      /**
       * 获取团队PK比赛列表
       * @param  {[boolean]} refresh [是否刷新]
       */
      getGamesT (refresh) {
        // body...
        if (refresh) {
          this.reqParams.pageNum = 1;
        }
        let filters = this.$store.state.teamFilters
        if (filters){
          this.reqParams.order = filters.order
          this.reqParams.gameStep = filters.gameStep
          this.reqParams.isPwd = filters.isPwd
          this.upDate = filters.upDate
          this.upPlayers = filters.upPlayers
          this.upAward = filters.upAward
        }
        let param = {
          userCode: '0',
          gameId: '',
          gameStatus: this.reqParams.gameStatus.toString(),
          gameKind: '',
          pageSize: this.reqParams.pageSize.toString(),
          pageNum: this.reqParams.pageNum.toString(),
          gameType: 'TDS',
          upGameId: '',
          gameStep: this.reqParams.gameStep.toString(),
          isPwd: this.reqParams.isPwd.toString(),
          order: this.reqParams.order.toString()
        }

        RemoteDAO.callUC12008302(param, (response) => {
          if (response.error == '1') {
          this.$store.dispatch('setTip', {text: response.data});
          if (this.games.length == 0) {//仅当games列表中没有比赛时才显示这个错误
            this.errorText = '出错啦~点击重试'
            this.requestError = true;
          }
          this.$refs.loadMore.onBottomError();
          return;
        } else {//request success
          this.requestError = false;
          if ((response.data == undefined || response.data == null) && this.games.length == 0) {
            this.requestError = true;
            this.errorText = '出错啦~点击重试'
            this.$refs.loadMore.onBottomError();
          } else if (response.data.body.length == 0 && this.games.length == 0) {
            this.errorText = '暂无符合查询条件的比赛~点击重试！'
            this.requestError = true;
            this.$refs.loadMore.onBottomError();
          } else {//get games
            if (refresh) {
              this.games = response.data.body;
              this.$refs.loadMore.onTopLoaded();
            } else {
              this.games = this.games.concat(response.data.body);
              if (response.data.body.length < this.reqParams.pageSize) {
                this.$refs.loadMore.onBottomAllLoaded();
              } else {
                this.reqParams.pageNum += 1;
                this.$refs.loadMore.onBottomLoaded();
              }
            }
            if(this.scrollTop){
              document.body.scrollTop = this.scrollTop
              this.scrollTop = 0
            }
          }
        }
      });
      }
    }
  }
</script>
